<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <PageTools>
          <template v-slot:after>
            <el-button size="small" type="primary" @click="addPurview('0','1')">添加权限</el-button>
          </template>
        </Pagetools>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          row-key="id"
        >
          <el-table-column label="权限名称" align="center" prop="title" />
          <el-table-column label="权限标识" prop="code" align="center" />
          <el-table-column label="权限描述" prop="description" header-align="center" />
          <el-table-column label="操作" align="center">
            <template v-slot="{row}">
              <el-button v-if="row.type === '1'" size="small" type="success" @click="addPurview(row.id+'','2')">添加子权限</el-button>
              <el-button size="small" type="primary" @click="editPurview(row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deletePurview(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 添加权限 -->
        <el-dialog :title="formData.id ? '编辑权限' : '新增权限'" :visible="showDialog" @close="closeDialog">
          <el-form ref="form" :model="formData" :rules="rules">
            <el-form-item label="权限名称" prop="title">
              <el-input v-model="formData.title" />
            </el-form-item>
            <el-form-item label="权限标识" prop="code">
              <el-input v-model="formData.code" />
            </el-form-item>
            <el-form-item label="权限描述" prop="description">
              <el-input v-model="formData.description" />
            </el-form-item>
            <el-form-item>
              <el-row type="flex" justify="center">
                <el-button size="small" type="primary" @click="btnOk">确定</el-button>
                <el-button size="small" @click="closeDialog">取消</el-button>
              </el-row>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getPurviewList, addPurview, deletePurview, editPurview } from '@/api/permission'
import { listToTree } from '@/utils/index'
export default {
  data() {
    return {
      tableData: [],
      formData: {
        title: '', // 标题
        code: '', // 标识
        description: '', // 描述
        pid: '0', // 父权限 id 没有的话就是 0
        type: '1' // 层级类型 1 或者 2
      },
      showDialog: false,
      rules: {
        name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getPurviewList()
  },
  methods: {
    // 获取权限列表
    async getPurviewList() {
      this.tableData = await listToTree(await getPurviewList(), '0')
    },
    // 添加权限
    addPurview(pid, type) {
      this.showDialog = true
      this.formData.pid = pid
      this.formData.type = type
    },
    // 编辑权限
    editPurview(row) {
      this.showDialog = true
      this.formData = row
    },
    // 删除权限
    async deletePurview(id) {
      await this.$confirm('确定要该角色?, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await deletePurview(id)
      this.getPurviewList()
      this.$message({
        message: '删除成功！',
        type: 'success'
      })
    },
    // 关闭弹窗
    closeDialog() {
      this.formData = {}
      this.showDialog = false
      this.$refs.form.resetFields() // 重置校验字段
    },
    // 提交
    async btnOk() {
      await this.$refs.form.validate()
      if (this.formData.id) {
        await editPurview(this.formData)
        this.$message({
          message: '修改权限成功',
          type: 'success'
        })
      } else {
        await addPurview(this.formData)
        this.$message({
          message: '添加权限成功',
          type: 'success'
        })
      }

      await this.getPurviewList()
      this.closeDialog()
    }
  }

}
</script>

<style>

</style>
